import React, { Component } from 'react'

import Form from '../components/TargetForm';
import { Modal, Button, Skeleton, message } from 'antd';
import { connect } from 'dva';
import router from 'umi/router';

import Floor from '../components/Floor'
import FloorItem from '../components/FloorItem';
import { SearchRow } from '@/styled/form';
import Link from 'umi/link';

interface IProps {
  dispatch?: Function;
  setTask: Function;
  datas: Array<any>;
  match?: {
    params: { id: string }
  };
  loading?: boolean;
  location?: any;
}

interface IState {
  visible: boolean;
  belongArr: Array<any>;
  isReset: boolean;
}

@connect(({ task_month, loading, routing }) => ({
  datas: task_month.target || [],
  loading: loading.effects['task_month/queryTargetList'],
  location: routing.location || {}
}))
class Setting extends Component<IProps, IState> {

  state: IState = {
    visible: false,
    belongArr: [],
    isReset: true
  }

  handleOk = () => {
    const { dispatch, datas, match } = this.props;
    const { belongArr } = this.state;

    const selected = Array.isArray(datas) ? datas.map(v => v.id) : [];
    const create = belongArr.filter(v => !selected.includes(v.targetId));

    dispatch({
      type: 'task_month/targetBatch',
      payload: {
        ruleId: match.params.id,
        create
      }
    }).then(() => {
      this.setState({ visible: false })
    })
  }

  handleCancel = () => {
    this.setState({ visible: false })
  }

  componentDidMount() {
    const { dispatch, match } = this.props;
    dispatch({ type: 'task_month/queryTargetList', payload: { ruleId: match.params.id } })
  }

  queryItemDetails = (v, index, callback) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'task_month/queryItemDetails',
      payload: { targetId: v.id, ind: index }
    }).then(() => {
      callback()
    })
  }

  next = () => {
    const { datas, match, location } = this.props;
    const isNew = location && location.state && location.state.isNew;
    const isSet = location && location.state && location.state.isSet;
    if (!Array.isArray(datas) || datas.length < 1) {
      message.warning('检查楼层不能为空');
      return;
    }

    router.push({
      pathname: `/data/task_month/${match.params.id}/update`,
      state: { goto: true, isNew, isSet: true }
    })
  }

  render() {

    const { datas, loading, match, location } = this.props;
    const selectedKey = [];
    const selected = [];
    Array.isArray(datas) && datas.forEach(v => {
      selectedKey.push(`${v.targetId}%%${v.groupId}%%${v.name}%%${v.groupName}%%3`);
      selected.push(v.targetId);
    })

    const isNew = location && location.state && location.state.isNew;
    const isSet = location && location.state && location.state.isSet;

    return (
      <>
        <Form setShow={() => this.setState({ visible: true })} />
        <Skeleton loading={loading} active >
          <section style={{ padding: "0 40px" }} >
            {
              Array.isArray(datas) && datas.map((it, index) =>
                <FloorItem
                  key={it.id}
                  data={it}
                  ruleId={match.params.id}
                  id={it.id}
                  queryItemDetails={(callback) => this.queryItemDetails(it, index, callback)}
                />
              )
            }
          </section>
        </Skeleton>
        <Modal
          title="添加楼层"
          width={800}
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          okText="确认"
          cancelText="取消"
          destroyOnClose
        >
          <Floor
            onChanges={(arr) => {
              this.setState({ belongArr: arr })
            }}
            selectedKey={selectedKey}
            selected={selected}
            isReset={this.state.isReset}
          />
        </Modal>
        <SearchRow type="flex" justify="start" style={{ padding: '40px 50px', width: '500px', position: 'fixed', bottom: '20px' }} >
          <Link to={{ pathname: `/data/task_month/${match.params.id}/update`, state: { goto: true, isNew, isSet } }}><Button>取消</Button></Link>
          <Button onClick={this.next} style={{ marginLeft: '15px' }} type="primary">下一步</Button>
        </SearchRow>
      </>
    )
  }
}

export default Setting;